<template>
  <div>
    <el-col
      :span="24"
      class="toolbar"
      style="
        padding-bottom: 0px;
        padding-bottom: 0px;
        display: flex;
        justify-content: space-between;
      "
    >
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="newopenuseript">{{$t('publicbtn.openanaccount')}}</el-button>
        </el-form-item>
      </el-form>
      <!-- <excelexport></excelexport> -->
    </el-col>

    <div class="userUpdateMoney" v-show="newOpenUserfrom" :hide-required-asterisk="true">
      <div class="userUpdateForm">
        <h2>{{$t('newopenuser.accountopening')}}</h2>
        <el-form
          ref="nweOpenUser"
          label-width="90px"
          class="demo-ruleForm"
          :model="nweOpenUser" 
          :rules="rules">
          
          <el-form-item   prop="areaCode" :required="true" :label="$t('newopenuser.areacodeinformation')">
            <el-select
              v-model="nweOpenUser.areaCode"
              :placeholder="$t('newopenuser.selectareacode')">
              <el-option
                v-for="item in areaCodes"
                :key="item.value"
                :label="item.name"
                :value="item.areaCode">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item  :required="true" :label="$t('field.upusername')"  prop="username" >
            <el-input
              label-width="90px"
              type="id"
              v-model="nweOpenUser.username"
              autocomplete="off"
               :placeholder="$t('publicbtn.upsusername')"
            ></el-input>
          </el-form-item>

          <el-form-item  :required="true" :label="$t('newopenuser.userpassword')" prop="pwd">
            <el-input
              label-width="90px"
              type="password"
              v-model="nweOpenUser.pwd"
              autocomplete="off"
              :placeholder="$t('newopenuser.inputapassword')"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="nweOpenUserSubmit('nweOpenUser')"
              >{{$t('publicbtn.submitbtn')}}</el-button
            >
            <el-button @click="nweOpenUserreset('nweOpenUser')">{{$t('bulletframe.cancel')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import excelexport from "@/components/export.vue";
import { postUserRequest } from "@/api/api";
export default {
  components: {
    excelexport,
  },
  data() {
    return {
      newOpenUserfrom:false,
      nweOpenUser: {
        areaCode: "",
        pwd: "",
        username: "",
      },
      // rules: {
      //   areaCode: [ {required: true, message: "请选择区号"}],
      //   username: [ {required: true, message: "用户名不能为空"}],
      //   pwd: [{required: true,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}$/,message: "密码最少8位一个大小写" }],
      // },
      areaCodes: [],
    };
  },
  computed:{
rules:function(){
  return{
        areaCode: [ {required: true, message: this.$t('newopenuser.selectareacode')}],
        username: [ {required: true, message: this.$t('newopenuser.cannotbeempty')}],
        pwd: [{required: true,pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}$/,message:this.$t('newopenuser.least8digits')}],
      }
}
  },
  methods: {
    newopenuseript() {  
    this.nweOpenUser['areaCode'] =''
    this.nweOpenUser['pwd'] =''
    this.nweOpenUser['username'] =''
    this.newOpenUserfrom = true
    },
    // 提交
    nweOpenUserSubmit(nweOpenUser) {
      this.$refs[nweOpenUser].validate((valid) => {
      if (valid) {
        let newUserMessage = JSON.parse(JSON.stringify(this.nweOpenUser))
            newUserMessage.pwd = newUserMessage.pwd
            // newUserMessage.pwd = this.$md5(newUserMessage.pwd)
        postUserRequest(newUserMessage,'/createUser').then((res)=>{
            var data = res.data
            if(data.code ==200){
                this.newOpenUserfrom=false
                this.$message({
                  message: data.message,
                   type: "success",
                });
                this.nweOpenUser['areaCode'] =''
                this.nweOpenUser['pwd'] =''
                this.nweOpenUser['username'] =''
            }else{
                this.$message({
                  message: data.message,
                  type: "error",
                });
            }
          })
              } 
            });
    },
    // 关闭
    nweOpenUserreset(nweOpenUser) {
      this.$refs[nweOpenUser].resetFields();
      this.newOpenUserfrom=false
    },
  },
  mounted(){
   
  },
  created() {

    this.areaCodes = JSON.parse(sessionStorage.getItem("areaCode_zh"));
    this.areaCodes.forEach((obj) => {
      let areacodequ = obj["name"].indexOf("+") + 1;
      obj["areaCode"] = obj["name"].substr(areacodequ);
    });
  },
};
</script>

<style scoped>
.userUpdateMoney {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9;
}
.userUpdateForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 30px;
  background: #fff;
  box-shadow: 0px 0px 3px #888;
}
.userUpdateMoney h2 {
  text-align: center;
  font-size: 18px;
}
</style>